Panda CSS v1.8.0がリリースされ、AIエージェント向けのツールを公開するMCP Server機能が追加された。 panda init-mcpコマンドでセットアップ可能。

提供されるツールには以下が含まれる。

• get_tokens: トークンの取得
• get_semantic_tokens: セマンティックトークンの取得
• get_recipes: レシピの取得
• get_patterns: パターンの取得
• get_config: 設定の取得

これにより、CursorなどのMCP対応エディタやAIエージェントがPanda CSSのデザインシステム情報を直接参照・利用できるようになる。

出展：Release @pandacss/[email protected] · chakra-ui/panda

Panda CSS がなぜ、どのように作られたのか。

Panda CSS - The Origin Story

Chakura UI がナルトから来ているように、作者は基本的にアニメや漫画から名前を付けているらしく、Panda CSS はカンフー・パンダ由来とのこと。

2023 年 3 月公開の Chakra UI のロードマップで紹介されていた Panda CSS が正式リリースされました。

https://panda-css.com/

Panda CSS は、今までの CSS in JS ライブラリの集大成のようなライブラリです。

• Zero Runtime な CSS フレームワーク
• vanilla-extract のように Type-safe
• Stitched のような Recipes/Variants 機能
• Design Token を定義する機能
• Emotion の css prop、styled-components の styled、Chakura UI の props で指定する形式など、それぞれとほぼ同等の記述をサポート

また公式ドキュメントを見れば分かりますが、多くのフレームワークでの利用が考えらており、それぞれのフレームワークについて、導入手順が丁寧に記述されています。

実際に小さなサービスで、Panda CSS への移行を試してみましたが、かなり体験が良かったです。また使ってみて感じたこととして、Panda CSS の個々の機能は独立しており薄いので、将来的に他のライブラリへ移行する場合も楽だと思いますし、逆に Panda CSS への移行も比較的楽なので Emotion や styled-components などから Zero Runtime な CSS フレームワークへの移行を考えている場合、移行先としてかなり良いのではないかと思いました。

懸念点を上げるとすれば、レスポンシブ対応など複雑な記述をしようとすると独自の記述が出てくる点や、それについての公式ドキュメントの記述が若干少なく感じる点、様々な記述が可能なため派閥が生まれそうな点などでしょうか。